import 'package:flutter/material.dart';
import 'package:flutter_demo2/ui/list_remove_item_anime/list_cell.dart';

import 'anime_wrapper.dart';

class ListRemoveItemTestPage extends StatefulWidget {
  const ListRemoveItemTestPage({Key? key}) : super(key: key);

  @override
  State<ListRemoveItemTestPage> createState() => _ListRemoveItemTestPageState();
}

class _ListRemoveItemTestPageState extends State<ListRemoveItemTestPage> {
  final List<VisibleCellModel> _visibleCells = [];
  final List<CellModel> _allCells = [];

  @override
  void initState() {
    for (int i = 0; i < 20; i++) {
      _allCells.add(CellModel(i, randomColor()));
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("list remove item test page"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 500,
              child: ListView.builder(
                itemBuilder: (context, index) {
                  GlobalKey<AnimeWrapperState> key =
                      GlobalKey<AnimeWrapperState>(debugLabel: "key of item$index");
                  _visibleCells.add(VisibleCellModel(key, _allCells[index]));
                  return AnimeWrapper(
                    itemKey: key,
                    child: ListCell(color: _allCells[index].color),
                    index: index,
                    onItemDispose: (GlobalKey<AnimeWrapperState> key) {
                      int index = _visibleCells.indexWhere((element) => element.key == key);
                      if (-1 != index) {
                        _visibleCells.removeAt(index);
                      }
                    },
                  );
                },
                itemCount: _allCells.length,
              ),
            ),
            MaterialButton(
              onPressed: () {
                // start anime in target cell
                int toRemoveCount = 0;
                for (int i = 0; i < _visibleCells.length; i++) {
                  if (0 == _visibleCells[i].cellModel.id % 3) {
                    toRemoveCount++;
                    _visibleCells[i].key.currentState?.startRemoveAnime();
                  }
                }
                // delete target cell in local
                if (toRemoveCount > 0) {
                  Future.delayed(const Duration(milliseconds: 1200)).then((value) {
                    _allCells.removeWhere((element) => 0 == element.id % 3);
                    setState(() {});
                  });
                }
                // call update api, and pull remote data to refresh: tbd
              },
              color: Colors.blueAccent,
              child: const Text("remove"),
            )
          ],
        ),
      ),
    );
  }
}

class VisibleCellModel {
  final GlobalKey<AnimeWrapperState> key;
  final CellModel cellModel;

  VisibleCellModel(this.key, this.cellModel);
}

class CellModel {
  final int id;
  final Color color;

  CellModel(this.id, this.color);
}
